<template>
	<view class="content">
		<view class="head bg-white">
			<view @click="shows">
				<view class="iconfont icon-my myd" style=""></view>
			</view>
			<scroll-view scroll-x class="bg-white nav">
				<view class="cu-item" :class="index==TabCur?'text-yellow cur':''" v-for="(item,index) in tab" :key="index" @tap="tabSelect(index)">
					{{item}}
				</view>
			</scroll-view>
		</view>

		<view class="qy-bg-white padding-sm margin-bottom-sm">
			<swiper class=" square-dot" :indicator-dots="true" :circular="true" style="height: 80px;" indicator-color="#8799a3"
			 interval="5000" duration="500" indicator-active-color="#FBBD08" @change="cardSwiper">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="leix">
						<view class="leix_l">
							<image :src="item.url" mode="aspectFill"></image>
						</view>
						<view class="leix_r">
							<view class="leix_r_01">
								<text class="leix_r_01_l padding-top-sm padding-bottom-sm">载重：</text><span>{{item.weight}}</span>
							</view>
							<view class="leix_r_01">
								<text class="leix_r_01_l">长*宽*高：</text><span>{{item.ckg}}</span>
							</view>
						</view>
					</view>

				</swiper-item>
			</swiper>
		</view>
		<view class="list qy-bg-white ">
			<view class="li" @click="jump_address">
				<view class="li_l">
					<view class="iconfont icon-fahuo" style="font-size: 22px;"></view>
				</view>
				<view class="li_m">请选择发货地址</view>
				<view class="li_r">
					<view class="iconfont icon-right"></view>
				</view>
			</view>
			<view class="li" @click="jump_finish">
				<view class="li_l">
					<view class="iconfont icon-shouhuo" style="font-size: 20px;"></view>
				</view>
				<view class="li_m">请选择收货地址</view>
				<view class="li_r">
					<view class="iconfont icon-right"></view>
				</view>
			</view>
			<view class="li">
				<view class="li_l">
					<view class="iconfont icon-time" style="font-size: 20px;"></view>
				</view>
				<view class="li_m">
					<ruiDatePicker fields="second" start="2010-00-00 00:00:00" end="2030-12-30 23:59:59" :value="value" @change="bindChange"
					 @cancel="bindCancel"></ruiDatePicker>
				</view>
				<view class="li_r">立即取货<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>
		
		<ChooseAddress></ChooseAddress>

		<view class="bbtn padding qy-bg-white">
			<view class="qbj">起步价<span>{{price | new_price}}¥</span></view>
			<view class="flex flex-direction bbtn_10 padding-right-xs">
				<button class="cu-btn bg-orange round lg" @click="jump_message">下一步</button>
			</view>
			<view class=" flex flex-direction  bbtn_10 padding-left-xs">
				<button class="cu-btn bg-yellow text-white round lg" @click="jump_orderdetail">一键呼叫</button>
			</view>
		</view>
		<!-- 弹出 -->
		<view v-if="show">
			<view class="tan">
				<view class="t_head">
					<img src="@/static/logo.png" />
					<view class="t_t">山西刘昊然</view>
					<view class="t_ka">
						<view class="ka_l">月卡 <span>25</span></span></view>
						<view class="ka_l">次卡 <span>3</span></span></view>
					</view>
				</view>
				<view class="con">
					<view class="con_01" @click="jump_money">
						<text class="iconfont icon-dingdan "></text><span>充值中心</span>
					</view>
					<view class="con_01" @click="jump_integral">
						<text class="iconfont icon-dingdan "></text><span>我的积分</span>
					</view>
					<view class="con_01">
						<text class="iconfont icon-dingdan "></text><span>我的推广</span>
					</view>
					<view class="con_01">
						<text class="iconfont icon-dingdan "></text><span>意见反馈</span>
					</view>
					<view class="con_01">
						<text class="iconfont icon-dingdan "></text><span>设置</span>
					</view>
				</view>
			</view>
			<view @click="shows">
				<Black></Black>
			</view>
		</view>
		<view v-if="tant">
			<TanButton @tantt="tantt"></TanButton>
		</view>
	</view>
</template>

<script>
	import ChooseAddress from '../../../global/components/choose_address.vue'
	import Black from '@/components/qy/Black'
	import TanButton from '../../../global/components/auth_dialog.vue'
	import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue';
	import mixin from '../../../global/mixin/mixin.js'
	export default {
		data() {
			return {
				price:0.9,
				value:'',
				tant: true,
				show: false,
				time: true,
				tab: ['中型货车', '小卡车', '面包货车'],
				TabCur: 0,
				TabCur1: 0,
				list: [1, 2],
				swiperList: [{
					id: 0,
					type: 'image',
					url: require('@/imgs/0.jpg'),
					weight: '1吨',
					ckg: '2*1*1米'
				}, {
					id: 1,
					type: 'image',
					url: require('@/imgs/0.jpg'),
					weight: '2吨',
					ckg: '2*1*1米'
				}, {
					id: 2,
					type: 'image',
					url: require('@/imgs/0.jpg'),
					weight: '5吨',
					ckg: '2*1*1米'
				}, ],
			}
		},
		mixins:[mixin],
		components: {
			ChooseAddress,
			ruiDatePicker,
			Black,
			TanButton
		},
		onLoad() {
			
		},
		
		methods: {
			bindChange(){
				
			},
			shows() {
				this.show = !this.show
			},
			tantt() {
				console.log(123)
				this.tant = !this.tant

			},
			tabSelect(e) {
				this.TabCur = e
				console.log(this.TabCur)
				this.scrollLeft = (e - 1) * 60
			},
			jump_address() {
				uni.navigateTo({
					url: '/pages/address/address'
				});
			},
			jump_finish() {
				uni.navigateTo({
					url: '/pages/finish/finish'
				});
			},
			cardSwiper(e) {
				this.TabCur = e.detail.current
			},
			jump_message() {
				uni.navigateTo({
					url: '/pages/message/message'
				});
			},
			jump_orderdetail() {
				uni.navigateTo({
					url: '/pages/order-detail/order-detail'
				});
			},
			jump_money() {
				uni.navigateTo({
					url: '/pages/money/money'
				});
			},
			jump_integral() {
				uni.navigateTo({
					url: '/pages/integral/integral'
				});
			}
		}
	}
</script>

<style lang='scss'>
	.content {
		.head {
			display: flex;

			.myd {
				font-size: 22px;
				padding: 15px 10px 0 10px;
			}
		}

		.leix {
			display: flex;
			height: 80px;

			.leix_l {
				width: 50%;
				text-align: center;

				image {
					width: 75%;
					height: 100%;
				}
			}

			.leix_r {
				width: 50%;
				text-align: center;

				.leix_r_01_l {
					width: 100px;
					display: inline-block;
					font-weight: 600;
				}
			}
		}

		.list {
			padding: 10px 10px 0;
		}

		.li {
			display: flex;
			border-bottom: 1px solid #F9F9F9;
			height: 50px;
			line-height: 50px;

			.li_l {
				width: 30px;
			}

			.li_m {
				flex-grow: 1;
			}

			.li_r {
				display: flex;
				color: #A6A6AB;
			}
		}

		.bbtn {
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			width: 100%;
			flex-wrap: wrap;

			.qbj {
				width: 100%;
				flex-shrink: 0;
				text-align: center;
				padding-bottom: 10px;

				span {
					font-size: 24px;
				}
			}

			.bbtn_10 {
				width: 50%;
			}
		}

		.rui-picker {
			border: none;
			padding-top: 10px;
		}

		.tan {
			width: 60vw;
			z-index: 9999;
			position: fixed;
			top: 0;
			left: 0;
			height: 100vh;
			background-color: #fff;

			.t_head {
				background-color: #008DE1;
				padding: 60px 20px 25px;

				.t_t {
					font-size: 18px;
					color: #fff;
					padding: 20px 10px;
				}

				.t_ka {
					background-color: #fff;
					border-radius: 20px;
					height: 40px;
					line-height: 40px;
					display: flex;

					.ka_l {
						width: 50%;
						padding-left: 15px;
					}

					.ka_l span {
						color: #008DE1;
						padding-left: 5px;
					}
				}
			}

			.t_head img {
				width: 90px;
				height: 90px;
				border-radius: 50px;
				border: 2px solid #ECF7FC;
			}

			.con {
				padding: 40px 30px;

				.con_01 {
					padding: 0px 0 40px 0px;
					font-size: 16px;
				}

				.con_01 img {
					width: 20px;
					height: 20px;
					margin-top: -2px;
				}

				.con_01 span {
					padding-left: 10px;
				}
			}
		}
	}
</style>
